<template>
	<div class="root">
    <!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-form :inline="true" :model="query" >
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="请输入关键字查询"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<!-- <el-button type="primary" @click="openSaveDialog(-1)">新增</el-button> -->
				</el-form-item>
        <el-form-item style="margin-left: 30px;">
					<el-button type="danger" @click="handleBatDelete">批量删除</el-button>
				</el-form-item>
			</el-form>
		</el-col>
    <el-col :span="24">
      <el-table
        v-loading="listLoading"
        :data="pageInfo.rows"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="Id"
          width="55">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="租户名称"
          width="150">
        </el-table-column>
        <el-table-column prop="logo" label="logo" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.logo" style="width: 45px;height: 45px">
          </template>
        </el-table-column>
        <el-table-column
          prop="admin.username"
          label="负责人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="companyNum"
          label="联系电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="registerTime"
          label="注册时间"
          width="160">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.state === 0">待审核</el-tag>
            <el-tag type="danger" v-else-if="scope.row.state === 1">审核失败</el-tag>
            <el-tag type="primary" v-else-if="scope.row.state === 2">待激活</el-tag>
            <el-tag type="success" v-else>已激活</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="200">
        </el-table-column>
        <el-table-column
          prop="tenantType.name"
          label="租户类型"
          width="100">
        </el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="openSaveDialog(scope.row.id)" >编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteById(scope.row.id)"/>
            <el-button type="primary"  v-if="scope.row.state===0" size="small" @click="updateState(scope.row.id,3)" >
              审核通过
            </el-button>
            <el-button type="danger"  v-if="scope.row.state===0" size="small" @click="updateState(scope.row.id,1)" >
              审核不通过
            </el-button>
            <el-button type="primary"  v-if="scope.row.state===1" size="small" @click="updateState(scope.row.id,3)" >
              审核通过
            </el-button>
            <el-button type="danger"  v-if="scope.row.state===2 || scope.row.state===3" size="small" @click="updateState(scope.row.id,1)" >
              审核不通过
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" style="margin-top: 20px;">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[3, 5]"
      :page-size="3"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    </el-col>
    <el-dialog
      title="提示"
      :visible.sync="saveVisible"
      width="40%">
      <div>
        <el-form label-position="right" :model="tenant" label-width="80px" size="small">
          <el-form-item label="租户名称">
            <el-input v-model="tenant.companyName" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="负责人" >
            <el-input v-model="tenant.admin.username" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="tenant.companyNum" placeholder="请输入电话"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="tenant.address" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="租户类型">
            <el-select v-model="tenant.typeId" placeholder="请选择">
              <el-option
                v-for="item in tenantType"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" style="margin: auto;display: block;" @click="saveTenant">保存</el-button>
    </el-dialog>

  </div>

</template>

<script>
  import tenantApi from '@/api/sys/tenant'
  import tenantTypeApi from '@/api/sys/tenantType'
	export default {
    name:'tenantManage',
		data() {
			return {
				//分页相关
				query:{
					page:1,
					rows:3,
					keyword:''
				},
				pageInfo:{
					total:0, //总记录数
					rows:[] //表数据
				},
				listLoading: true,
        multipleSelection:[], //选中的数据
        saveVisible:false,
        tenant:{admin:{username:''},tenantType:{name:''}},
        tenantType:[]
		  }
    },
    created(){

    },
		methods: {
			search(){
        this.getListPage(this.query)
      },
      //全选回调函数
      handleSelectionChange(value){
        this.multipleSelection = value
      },
      //每页总条数发生改变的回调函数
      handleSizeChange(pageTotals){
        this.query.rows = pageTotals
        this.getListPage(this.query)
      },
      //当前页发生改变的回调函数
      handleCurrentChange(curentPage){
        this.query.page = curentPage
        this.getListPage(this.query)
      },
      //分页查询
      getListPage(query){
        tenantApi.getPageList(query)
          .then(response => {
            this.pageInfo.rows = response.data.resultObj.rows
            this.pageInfo.total = response.data.resultObj.total
            setTimeout(() => {
              this.listLoading = false
            },500)
          })
      },
      openSaveDialog(id){
        if(id !== -1){
          tenantApi.getTenantById(id)
            .then(response => {
              this.tenant = response.data.resultObj
            })
        }else{
          this.tenant = {}
        }
        this.saveVisible = true
      },
      //保存修改
      saveTenant(){
        tenantApi.saveTenant(this.tenant)
          .then(response => {
            this.$message({
              message: '保存数据成功',
              type: 'success'
            });
            this.getListPage(this.query)
            this.saveVisible = false
          })
      },
      //通过id删除租户信息
      deleteById(id){
        this.$confirm('此操作将永久删除该租户的信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          tenantApi.deleteById(id)
          .then(response => {
            this.getListPage(this.query)
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //批量删除
      handleBatDelete(){
        this.$confirm('此操作将永久删除这些租户的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.multipleSelection.forEach(e => {
            tenantApi.deleteById(e.id)
            .then(response => {
              this.getListPage(this.query)
              this.$message({
                message: '批量删除成功',
                type: 'success'
              });
            })
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //获取所有租户类型
      getAllTenantType(){
        tenantTypeApi.getAllList()
          .then(response => {
            this.tenantType = response.data.resultObj
          })
      },
      //修改审核状态
      updateState(id,value){
        tenantApi.getTenantById(id)
          .then(response => {
            let ten = response.data.resultObj
            ten.state = value
            tenantApi.saveTenant(ten)
              .then(response => {
                this.getListPage(this.query)
                this.$message({
                  message: '修改状态成功',
                  type: 'success'
                });
              })
          })
      }
		},
  mounted() {
    this.getListPage(this.query)
    this.getAllTenantType()
  }

}

</script>

<style scoped>
.root{
  margin: 30px 16px;
}
.toolbar{
  background-color: rgb(244, 243, 244);
  padding-top: 10px;
  padding-left: 10px;
  height: 60px;
}
</style>
